<template>
	<view class="hui b_width">
		<u-navbar leftIconColor="#fff" :autoBack="true" title="支付" titleStyle="color:#fff" :placeholder="true"
			bgColor="#3C7CFF">
		</u-navbar>
		
		<view class="info_box">
			<view class="b_flex_c_s">
                <view>
					<view class="b_m_bs">单价&nbsp;&nbsp;{{$project.setPriceGe(info.currentTime,2)}}</view>
					<view>押金&nbsp;&nbsp;{{info.currentMaterial.deposit}}元</view>
					<view class="time_box">
						<view class="b_m_b" v-for="(item,index) in info.times">
							{{item.name}}:&nbsp;{{$project.setTimeGe(item)}}{{$project.setPriceGe(item)}}
						</view>
						<view class="b_m_b" v-for="(item,index) in infoList">
							{{item}}
						</view>
					</view>
					
					
				</view>
				<image class="pay_img" mode="widthFix" src="@/static/img/lock/payBack.png"></image>
			</view>
			

			<u-radio-group v-model="check" size="27" active-color="#F98754" @change="setCheck" >
				<view class="list_box">

					<view class="title" v-if="info.packages.length>0||info.times.length>0">请选择您需要的时段</view>
					
					<view v-if="info.times.length>0"
						:class="[index+1<info.times.length?'xian':'','b_flex_c','l_box']"
						v-for="(item,index) in info.times" :key="index">
						<view class="radio" >
							<u-radio :disabled="item.id!=info.currentTime.id" icon-size="26" :name="'A'+','+item.id"></u-radio>
						</view>
						<view>
							<view :class="[index===check?'check':'','name','b_m_b']">{{item.name}}</view>
							<view class="time">
								<view class="left b_red">
									{{item.name}}:&nbsp;{{$project.setTimeGe(item)}}{{$project.setPriceGe(item)}}
								</view>
					
							</view>
						</view>
					</view>
					
					<view v-if="info.packages.length>0"
						:class="[index+1<info.packages.length?'xian':'','b_flex_c','l_box']"
						v-for="(item,index) in info.packages" :key="index">
						<view class="radio" >
							<u-radio icon-size="26" :name="'B'+','+item.id"></u-radio>
						</view>
						<view class="b_flex_c">
							<view :class="[index===check?'check':'','name','b_m_b','m_l']">{{item.name}}</view>
							<view class="b_m_b name">
								<!-- <view v-for="(items,indexs) in item.times" :key="indexs" class="left">
									{{items.name}}:&nbsp;{{$project.setTimeGe(items)}}{{$project.setPriceGe(items)}}
								</view> -->
                                    {{item.price}}元
							</view>
						</view>
					</view>

					<u-radio-group v-model="xyCheck" size="30" active-color="#3C7CFF">
						<view class="b_flex_c xy_box">
							<view>
								<u-radio icon-size="30" :name="1"></u-radio>
							</view>
							<view class="yd">我已阅读并同意</view>
							<view class="xy" @click="$project.toPath('/pages/lock/agreement')">《强邦乐用户协议》</view>
						</view>
					</u-radio-group>
					<view class="xy pay_msg">请确认该卡位有设备再支付</view>
					<view class="pay_button" @click="setDw()"><!-- 共计￥6.00&nbsp;立即支付 -->确认</view>
				</view>
			</u-radio-group>

		</view>

	</view>
</template>

<script>
	import {
		deviceLease,
		deviceTimes,
		deviceRptstat,
		deviceDeposit,
		errorAdd,
		
	} from "@/require/api.js";
	export default {
		data() {
			return {
				deviceNumber: '',
				check: '',
				xyCheck: '',
				info: {
					packages: [],
					times:[]
				},
				infoList:[],
				list: [],
				params: {
					deviceId:'',
					materials: '',
					form: 'routine',
					timeId:'',
					packageId:''
				},
				payStatus:true,
				shebInfo:{}
			}
		},
		onLoad(data) {
			this.deviceNumber = data.deviceNumber;
		},
		onShow() {
			this.$blue.openBluetoothAdapter();
			this.getTimes();
			this.getInfo();
		},
		
		methods: {
			async getInfo(){
				let {
					code,
					data
				} = await deviceLease({
					deviceNumber: this.deviceNumber
				});
				this.shebInfo=data;
			},
			setCheck(e){
				console.log(e);
				let item=e.split(',');
				if(item[0]=='A'){
					if(item[1]!=this.info.currentTime.id){
						return this.$project.toast('不在可选时段');
					}
					this.params.timeId=this.info.currentTime.id;
					this.params.packageId='';
				}else{
					this.params.packageId=Number(item[1]);
					this.params.timeId='';
				}
			},
			async getTimes() {
				let {
					data
				} = await deviceTimes({
					deviceNumber: this.deviceNumber
				});
				this.info = data;
				if(data.currentTime.info){
					this.infoList=data.currentTime.info.split(/[(\r\n)\r\n]+/);
				}
				this.check='A'+','+this.info.currentTime.id;
				this.setCheck(this.check);
			},
			async setDw(){
				let _=this;
				uni.authorize({
					scope:"scope.userLocation",
					success:function(res){
					 _.$blue.openBluetoothAdapter();
					 console.log(res);
					 _.pay();
					},
					fail:function(error){
						console.log(error);
						errorAdd({msg: JSON.stringify(error)});
					    _.$project.isLocation();
						//_.pay();
					}
				})
			},
			async pay() {
				if(!this.payStatus) return this.$project.toast('请勿重复点击,请稍后再试!');
				if (this.xyCheck != 1) return this.$project.toast('请确认强乐邦用户协议');

				if (this.params.timeId == ''&& this.params.packageId=='') return this.$project.toast('请选择时段');
				
				console.log(this.params);
				
				this.payStatus=false;
				
				let {
					code,
					data
				} = await deviceLease({
					deviceNumber: this.deviceNumber
				});
				if (!data){
					this.payStatus=true;
					return;
				} 

                 

                let mac = data.device.mac;
				
				
			 	if(!this.$store.state.macList[mac]){
					this.payStatus=true;
					let content=this.$project.getMacMsg(mac,this.$store.state.macList);
					uni.showModal({
						title: '设备没找到，请重试',
						content: content,
						showCancel: false,
						success() {
							
						}
					});
					return true;
				} 
				
				
				
				if (data.type == 'deposit') {
					
					uni.showLoading({
						title: '支付发起中,请稍后...',
						mask:true
					})
					this.params.materials = this.info.currentMaterial.materials;
					this.params.deviceId=data.device.id;
					//this.$project.toPath('/pages/lock/index?deviceNumber=' + this.deviceNumber);
					this.toPay(mac);
				}

				if (data.type == 'success') {
					this.toBlue(mac);
					this.payStatus=true;
				}
			},
			async toPay() {
				let _ = this;
			
				let {
					code,
					data
				} = await deviceDeposit(this.params);
				if (data) {
					
					
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.data.jsConfig.timeStamp,
						nonceStr: data.data.jsConfig.nonceStr,
						package: data.data.jsConfig.packages,
						signType: data.data.jsConfig.signType,
						paySign: data.data.jsConfig.paySign,
						success: function(res) {
							uni.hideLoading();
							_.toBlue();
							_.payStatus=true;
						},
						fail: function(err) {
							uni.hideLoading();
							_.$project.toast('支付取消');
							_.payStatus=true;
							
						}
					});
				}else{
					uni.hideLoading();
					_.payStatus=true;
				}
			},
			async toBlue(mac = '') {
				if (!mac) {
					let {
						code,
						data
					} = await deviceLease({
						deviceNumber: this.deviceNumber
					});
					mac = data.device.mac;
				}
				
				let deviceId='';
				if(!this.$store.state.macList[mac]){
					return this.$project.toast('打开蓝牙和定位，请稍后再试');
				}else{
					 deviceId=this.$store.state.macList[mac];
				}
				
				/* if (!this.$project.inObjectArray({
						deviceId: mac
					}, this.$store.state.devices, 'deviceId')) {
					return this.$project.toast('设备未找到,请稍后重试');
				} */
				let _=this;
				deviceRptstat({
					lockstat: 0,
					mac: mac
				}).then(res=>{
					_.$store.commit('setType', 1);
					_.payStatus=false;
					uni.showLoading({
						title: '开锁中,请勿远离设备...',
						mask:true
					})
					
					_.$blue.createBLEConnection(deviceId);
				});
				
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hui {
		background-color: #3C7CFF;
	}

	.pay_img {
		width: 310rpx;
	}

	.info_box {
		color: #fff;
		box-sizing: border-box;
		padding: 80rpx 20rpx;
		z-index: 1002;
	}

	.time_box {
		font-size: 25rpx;
		margin-top: 33rpx;
	}

	.list_box {
		background-color: #fff;
		border-radius: 18rpx;
		margin-top: 35rpx;
		color: #252B50;
		box-sizing: border-box;
		padding: 20rpx;
		width: 100%;
	}

	.title {
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		font-family: PingFang SC;
	}

	.name {
		font-size: 40rpx;
	}

	.l_box {
		color: #9296AF;
		box-sizing: border-box;
		padding: 40rpx 0;

	}

	.xian {
		border-bottom: 1rpx solid #F5F5F5;
	}

	.check {

		color: #252B50;
		font-weight: bold;
	}

	.time {
		font-size: 26rpx;
		width: 100%;
	}

	.radio {
		margin-right: 20rpx;
	}

	.left {
		margin-bottom: 20rpx;
	}

	.xy_box {
		font-size: 28rpx;
		margin: 0 auto;
		margin-top: 80rpx;
	}

	.yd {
		color: #9296AF;
	}

	.xy {
		color: #3C7CFF;
	}

	.pay_button {
		color: #fff;
		width: 100%;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		border-radius: 35rpx;
		background-color: #3C7CFF;
		margin: 20rpx 0 40rpx 0;
	}
	.pay_msg{
		text-align: center;
		font-size: 28rpx;
	}
	.m_l{
		margin-right: 35rpx;
	}
</style>